<!--  -->
<template>
  <div>
    <el-card>
      <div slot="header" class="header-line">
        <div class="header-search">
          <span>线上热门搜索</span>
          <el-dropdown>
            <span>
              <i class="el-icon-more" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>黄金糕</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
              <el-dropdown-item>螺蛳粉</el-dropdown-item>
              <!-- <el-dropdown-item divided>蚵仔煎</el-dropdown-item> -->
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div>
        <el-row :gutter="10">
          <el-col :span="12">
            <LineCharts />
          </el-col>
          <el-col :span="12">
            <LineCharts />
          </el-col>
        </el-row>
        <el-table
          :data="tableData"
          style="width: 100%;margin-top:10px"
          border
        >
          <el-table-column
            label="排名"
            width="80"
            type="index"
          />
          <el-table-column
            label="搜索关键字"
            width="180"
          />
          <el-table-column
            label="用户数"
            sortable
          />
          <el-table-column
            label="周涨幅"
            sortable
          />
        </el-table>
        <el-pagination
          layout="prev, pager, next"
          :total="1000"
          class="pagination"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import LineCharts from './LineCharts'
export default {
  components: {
    LineCharts
  },
  data() {
    return {
      tableData: [{
      }]
    }
  }
}
</script>

<style  scoped>
.header-line {
  border-bottom: 1px solid lightgray;
  padding: 5px 0 13px 0;
}
.header-search {
  display: flex;
  justify-content: space-between;
}
.pagination {
  float: right;
}
</style>
